<template>
  <div class="container">
    <h3 style="padding: 10px 0px 5px 0;">{{$route.query.categoryName}}</h3>

    <article-card v-for="item in list" :key="item.id" 
      :imgUrl="`${imgUrl}`"
      :img="item.img"
      @click="to(item)"
    >
      <template slot="title">{{item.title}}</template>
      <template slot="body">
        <div v-html="item?.content?.substring(0, 100)"></div>
      </template>
      <template slot="footer">
        <i class="el-icon el-icon-date" style="padding: 0 5px" title="修改/更新时间" >
          <time class="time">{{
            item.updateTime | dateFormat
          }}</time>
        </i>
        <el-divider direction="vertical"></el-divider>
        <i class="el-icon el-icon-reading" style="padding: 0 5px" title="访问量" >{{item.count}}</i>
        <el-tag size="small" class="category-tag" title="分类">{{ item.categoryName }}</el-tag>
      </template>
    </article-card>

    <no-data v-show="list.length === 0 && queryInfo.id !== ''"
      :message="'此分类下没有数据'"
    />



  </div>
</template>

<script>
import ArticleCard from '@/components/front/ArticleCard.vue'
import NoData from '@/components/NoData.vue'
export default {
  components: {
    ArticleCard,
    NoData
  },
  watch: {
    $route() {
      this.loadList(this.$route.params.id)
    }
  },
  mounted() {
    // this.GetCategories()
    this.$scrollListener(window, this.handleScroll)
    // console.log();
    this.loadList(this.$route.params.id)
    document.title = '分类-个人博客'
  },
  data() {
    return {
      list: [],
      queryInfo: {
        id: '',
        pagenum: 1,
        pagesize: 5,
      },
      maxPageSize: 1,
      imgUrl: '/api/download',
      scrollTop: 0,
    };
  },
  methods: {
    // GetCategories() {
    //   console.log("loading")
    //   this.$http.get("/front/category/list").then((res) => {
    //     if (!res.data.status) {
    //       return this.$message.error("获取分类失败")
    //     }

    //     this.categories = res.data.data
    //   })
    // },
    GetList() {
      this.$http.get("/front/category/articleList", { params: this.queryInfo }).then((res) => {
        if (!res.data.status) {
          return this.$message.error("获取文章失败！");
        }
        const data = res.data.data;

        this.list.push(...data.records) ;
        this.maxPageSize = Math.ceil(data.total / this.queryInfo.pagesize)
      });
    },
    loadList(id) {
      if (this.queryInfo.id === id) return
      this.list = []
      this.queryInfo.id = id
      this.queryInfo.pagenum = 1
      this.GetList()
    },
    handleScroll (e) {
      if (e.target !== document)
        return
      const { scrollTop, scrollHeight, clientHeight } = e.srcElement.scrollingElement || e.target.scrollingElement
      if (Math.ceil(scrollTop) + Math.ceil(clientHeight) >= scrollHeight) {
        if (this.queryInfo.pagenum < this.maxPageSize) {
          this.queryInfo.pagenum ++
          this.GetList()
        }
      }
    },
    to(item) {
      console.log(item.id);
      this.$router.push({
        path: `/articleDetail/${item.id}`,
        title: item.title
      });
    },
    
  },
  beforeDestroy () {
    this.$removeScrollListener(window, this.handleScroll)
  },
};
</script>

<style lang="less" scoped>
.category {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 5rem;
  .category-item {
    max-height: 1rem;
    line-height: 1rem;
    padding: 5px;
    margin: 10px 5px;
    background: #ccc;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    &:hover {
      background: #006d87;
      color: #fff;
    }
  }
}
</style>